<template>
    <div class="screenWrapper" :style="`width:${pageW}px;height:${pageH}px;`">
      <v-row tag="header" :title="title">
        <slot name="header"></slot>
      </v-row>
        <main>
            <slot></slot>
        </main>
        <v-row tag="footer">
          <slot name="footer"></slot>
        </v-row>
    </div>
  </template>
  
  <script>
  import emitter from '../utils/emitter'
  import vChart from '../components/widget/chart.vue'
  import vRow from '../components/widget/row.vue'
  import screenfull from '../utils/screenfull'
  import { computed } from 'vue'
  export default {
    name: 'v-fullscreen',
    mixins: [emitter],
    components: {
        vChart, vRow
    },
    props: {
      outerSpace: {
        type: Number,
        default: 15
      },
      title: {
        type: String,
        default: ''
      },
      width: {
        type: Number,
        default: 1920
      },
      height: {
        type: Number,
        default: 1080
      }
    },
    data() {
      return {
        pageW: 0,
        pageH: 0,
        component: {},
        componentInfo: [],
        isFullScreen: false,
        isActive: false
      }
    },
    provide() {
      return {
        root: computed(() => this.component), // 传递组件本身，子孙组件获取更多操作能力
      }
    },
    watch: {
      isFullScreen(n, o) {
        if (n) {
          const html = document.getElementsByTagName('html')[0]
          html.style.fontSize = '100px'
        } else {
          setTimeout(() => {
            this.setHtmlFontSize()
          }, 500)
        }
      }
    },
    computed: {
    },
    methods: {
      getScreenInfo() {
        this.$nextTick(() => {
          const height = window.innerHeight || document.documentElement.clientHeight
          const width = window.innerWidth || document.documentElement.clientWidth
          this.pageW = width
          this.pageH = height
          this.$emit('popScreen', {'isFull': this.isFullScreen, width: this.pageW, height: this.pageH})
        })
      },
      setHtmlFontSize() {
        const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        const htmlDom = document.getElementsByTagName('html')[0]
        htmlDom.style.fontSize = htmlWidth / this.width * 100 + 'px'
      },
      setModuleSize() {
        this.$nextTick(cb => {
            this.componentInfo.forEach(item => {
                const { name, width, height } = item
                const W = name + '_width'
                const H = name + '_height'
                const component = this.component
                const scaleWidth = width * this.pageW / this.width;
                const scaleHeight = height * this.pageH / this.height;
                Object.assign(component, {[W]: scaleWidth, [H]: scaleHeight })
            })
        })
      },
      toFullScreen(bool) {
        if (!screenfull.isEnabled) {
          console.error('unEnabled')
          return
        }
        if (this.isFullScreen && !bool){
          screenfull.request()
        } else {
          screenfull.exit()
        }
        setTimeout(() => {
          this.getScreenInfo()
          this.setModuleSize()
        }, 400)
      },
      checkFullScreen() {
        var isFull = window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
        if (isFull === undefined) {
          isFull = false;
        }
        return isFull
      },
      handleResize() {
        /* 监测是否是全屏状态，如果不是进入全屏 */
        const bool = this.checkFullScreen()
        if (bool) return
        this.isFullScreen = bool
        this.toFullScreen()
      }
    },
    created() {
      this.setHtmlFontSize()
      this.getScreenInfo()
    },
    mounted() {
      const t  = this
      let time = null
      window.onresize = (e) => {
        /* if (this.isActive) {
          this.isActive = false
          return
        } */
        if(time !== null) {
          clearTimeout(time)
        }
        time = setTimeout(() => {
          t.handleResize()
        }, 300)
      }
      this.on('handleModule', obj => {
        const W = obj.name + '_width'
        const H = obj.name + '_height'
        const component = this.component
        const scaleWidth = obj.width * this.pageW / 1920;
        const scaleHeight = obj.height * this.pageH / 1080;
        Object.assign(component, {[W]: scaleWidth, [H]: scaleHeight })
        this.componentInfo.push(obj)
      })
      this.on('handleDialog', obj => {
        const W = obj.name + '_width'
        const H = obj.name + '_height'
        const scaleWidth = obj.width * this.pageW / 1920;
        const scaleHeight = obj.height * this.pageH / 1080;
        Object.assign(component, {[W]: scaleWidth, [H]: scaleHeight })
        this.componentInfo.push(obj)
      })
      this.on('handleScreen', bool => {
        if (this.isFullScreen !== bool) {
          this.isFullScreen = bool
          // this.isActive = true
          this.toFullScreen()
        }
      })
    }
  }
  </script>
  <style scoped>
  .screenWrapper{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  main{
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  </style>
  